<script language="JavaScript">
function contar() {
  n = document.getElementById("createPostingForm:description").value.length;
  if (n > 20000) {
    document.getElementById("createPostingForm:description").value = document.getElementById("createPostingForm:description").value.substring(0, 20000);
  }
  else {
    document.getElementById("createPostingForm:contador").value = 20000-n;
  }
}
</script>
<style>
    .rich-table-cell {
        border: 0px;
    }
</style>
<f:view>
    <h:form>
        <h:panelGrid columns="3" >
            <h:outputText value="Create a House Posting in #{sessionBean.ejbSession.currentSite.site}" style="font-size: 20px; font-weight: bold;"/>
            <rich:toolBar id="toolBarUser" itemSeparator="line" width="200" style="right:5px; top:5px; position:absolute;">
                <a4j:region id="ajaxOpen" rendered="#{sessionBean.ejbSession.owner==null}">
                    <a4j:commandLink value="Log in to your account" onclick="Richfaces.showModalPanel('loginPanel');" focus="loginEmail" ajaxSingle="true" />
                </a4j:region>
                <h:outputLink value="/site/faces/signUp.jsp" target="_blank" rendered="#{sessionBean.ejbSession.owner==null}">
                    <h:outputText value="Sign Up"></h:outputText>
                </h:outputLink>
                <h:panelGroup rendered="#{sessionBean.ejbSession.owner!=null}">
                    <h:outputText value="Logged in as " />
                    <h:commandLink value="#{sessionBean.ejbSession.owner.email}" action="#{housBean.homeUser}" />
                </h:panelGroup>
                <a4j:region id="ajaxLogout" rendered="#{sessionBean.ejbSession.owner!=null}">
                    <a4j:commandLink value="Log out" action="#{loginBean.logout}" reRender="toolBarUser,inputEmail,backForm" >
                        <f:setPropertyActionListener target="#{housBean.back}" value="#{0}"/>
                    </a4j:commandLink>
                </a4j:region>
            </rich:toolBar>
            <a4j:status for="ajaxLogout" >
                <f:facet name="start">
                    <h:graphicImage  value="/images/ajax_process.gif"/>
                </f:facet>
            </a4j:status>
        </h:panelGrid>
    </h:form>
    <a4j:region>
    <h:form id="createPostingForm">
        <h:panelGrid rendered="#{housBean.createOk && !housBean.payOk}" >
            <h:messages globalOnly="true" />
            <h:outputLink value="/site/faces/recoveryPassword.jsp" rendered="#{housBean.linkRPOk}" target="_blank">
                <h:outputText value="Recovery Password" />
            </h:outputLink>
        </h:panelGrid>
    <h4><h:outputText value="#{housBean.housCategorie.categorie} categorie selected, Price: #{housBean.hous.fee}" rendered="#{housBean.payOk}"/></h4>
    <h:panelGrid rendered="#{!housBean.createOk}" >
    <rich:panel>
        <h:messages globalOnly="true" style="color: red" styleClass="errorMessage"/>
        <h:panelGrid columns="3">
            <h:outputText value="Type:" />
            <h:selectOneRadio id="type" value="#{housBean.hous.housType}" >
                <f:selectItem
                    itemValue="offered"
                    itemLabel="offered"/>
                <f:selectItem
                    itemValue="wanted"
                    itemLabel="wanted"/>
            </h:selectOneRadio>
            <h:message for="type" />
            
            <h:outputText value="(*) Title:"/>
            <h:inputText id="title" maxlength="100" value="#{housBean.hous.title}" size="70" required="true" requiredMessage="This is a required field"/>
            <h:message for="title" style="color: red" styleClass="errorMessage"/>
            
            <h:selectOneMenu value="#{housBean.hous.amountType}" >
                <f:selectItem
                    itemValue="sale"
                    itemLabel="Sale Price:"/>
                <f:selectItem
                    itemValue="rent"
                    itemLabel="Rent:"/>
            </h:selectOneMenu>
            <h:panelGrid columns="3">
            <h:panelGrid columns="2">
                <h:inputText id="amountValue" maxlength="20" value="#{housBean.searchMinAmountValue}" size="15" converter="doubleConverter" converterMessage="the amount is not valid"/>
                <h:outputText value="$" style="font-size: 13px;"/>
            </h:panelGrid>
            <a4j:region>
            <h:selectOneMenu value="#{housBean.hous.sizeType}" >
                <f:selectItem
                    itemValue="br"
                    itemLabel="# BR:"/>
                <f:selectItem
                    itemValue="ft2"
                    itemLabel="SqFt:"/>
                <a4j:support event="onchange" reRender="sizeValuePanel" ajaxSingle="true" />
            </h:selectOneMenu>
            </a4j:region>
            <h:panelGrid id="sizeValuePanel" columns="2" >
                <rich:inputNumberSpinner id="sizeValue" value="#{housBean.searchMinSizeValue}" inputSize="7" minValue="0" maxValue="8" enableManualInput="false" cycled="false" rendered="#{housBean.hous.sizeType=='br'}" />
                <h:inputText id="sizeValue1" maxlength="20" value="#{housBean.searchMinSizeValue}" size="10" converter="integerConverter" converterMessage="the sqft should be integer" rendered="#{housBean.hous.sizeType=='ft2'}"/>
                <h:outputText value="#{housBean.hous.sizeType}" style="font-size: 13px;" />
            </h:panelGrid>
            </h:panelGrid>
            <h:panelGroup>
                <h:message for="amountValue" style="color: red" styleClass="errorMessage"/>
                <h:message for="sizeValue1" style="color: red" styleClass="errorMessage"/>
            </h:panelGroup>
            
            <c:if test="${!empty sessionBean.areasCurrentSite}">
            <h:outputText value="Area:" />
            <a4j:region>
            <h:selectOneMenu id="area" value="#{housBean.areaId}" >
                <c:forEach var="area" items="#{sessionBean.areasCurrentSite}" >
                    <f:selectItem
                        itemValue="#{area.id}"
                        itemLabel="#{area.area}"/>
                </c:forEach>
                <a4j:support event="onchange" reRender="locationPanel" ajaxSingle="true" />
            </h:selectOneMenu>
            <a4j:status>
                <f:facet name="start">
                    <h:graphicImage  value="/images/ajax_process.gif"/>
                </f:facet>
            </a4j:status>
            </a4j:region>
            <h:message for="area" />
            </c:if>
            
            <h:outputText value="Specific Location:"/>
            <h:panelGroup id="locationPanel">
            <h:inputText id="location" maxlength="70" value="#{housBean.hous.location}" size="50" rendered="#{empty housBean.locationsHousArea}" />
            <h:selectOneMenu id="location1" value="#{housBean.hous.location}" rendered="#{!empty housBean.locationsHousArea}" >
                <c:forEach var="location" items="#{housBean.locationsHousArea}" >
                    <f:selectItem
                        itemValue="#{location.location}"
                        itemLabel="#{location.location}"/>
                </c:forEach>
            </h:selectOneMenu>
            </h:panelGroup>
            <a4j:commandButton id="refreshLocationPanel" style="display: none; visibility: hidden;" reRender="locationPanel" />
            
            <h:outputText value="Categorie:" />
            <h:panelGroup>
            <h:selectOneMenu id="categorie" value="#{housBean.housCategorieId}">
                <c:forEach var="categorie" items="#{adminBean.housCategories}" >
                    <f:selectItem
                        itemValue="#{categorie.id}"
                        itemLabel="#{categorie.categorie}"/>
                </c:forEach>
            </h:selectOneMenu>
            <h:outputText value="Price: #{housBean.housPrice} $" rendered="#{housBean.housPrice>0 && (!housBean.createOk || housBean.payOk)}"/>
            </h:panelGroup>
            <h:message for="categorie" />
            
            <h:outputText value="(*) Description:"/>
            <h:inputTextarea id="description" onkeydown="contar()" onkeyup="contar()" value="#{housBean.hous.description}" rows="7" cols="80" required="true" requiredMessage="This is a required field" />
            <h:panelGroup><h:inputText id="contador" onkeydown="contar()" onkeyup="contar()" value="#{housBean.contador}" size="5" /><h:message for="description" style="color: red" styleClass="errorMessage"/></h:panelGroup>
            
            <h:outputText value="Address Info:"/>
            <h:inputText id="address" maxlength="90" value="#{housBean.hous.address}" size="50" />
            <h:message for="address" style="color: red" styleClass="errorMessage"/>
        </h:panelGrid>
            
        <h:panelGrid id="inputEmail" columns="3">
            <h:outputText value="(*) Email Address:"/>
            <h:inputText id="email" maxlength="50" value="#{housBean.hous.email}" size="30" required="true" requiredMessage="This is a required field" rendered="#{sessionBean.ejbSession.owner==null}"/>
            <h:inputText id="email1" value="#{sessionBean.ejbSession.owner.email}" size="30" readonly="true" rendered="#{sessionBean.ejbSession.owner!=null}"/>
            <h:message for="email" style="color: red" styleClass="errorMessage"/>
            
            <c:if test="${sessionBean.ejbSession.owner==null}">
            <h:outputText value="(*) Re-Type Email Address:"/>
            <h:inputText id="email2" maxlength="50" value="#{housBean.email1}" size="30" required="true" requiredMessage="This is a required field" />
            <h:message for="email2" style="color: red" styleClass="errorMessage"/>
            </c:if>
        </h:panelGrid>
            
        <h:panelGrid columns="2">
            <h:outputText value="Reply To:"/>
            <h:selectOneRadio id="typeReplayTo" value="#{housBean.hous.typeReplyTo}" layout="pageDirection">
                <f:selectItem 
                    itemValue="real email"
                    itemLabel="use this email address for replies"/>
                <f:selectItem
                    itemValue="masked email"
                    itemLabel="reply to: house-xxxxxxxxx@eez2find.com (eez2find.com anonymizes your real email address and all replies go to it)."/>
                <f:selectItem
                    itemValue="any email"
                    itemLabel="DO NOT SHOW any email address (make sure to put a phone # or other contact info in your posting)."/>
            </h:selectOneRadio>
            
            <h:outputText value="Images:"/>
            <rich:simpleTogglePanel id="uploadPanel" width="500px" opened="true" label="Manage your Images" switchType="client" >
                <div align="center">
                <rich:fileUpload immediateUpload="true" acceptedTypes="jpg, gif, png, bmp" addControlLabel="Add image..." maxFilesQuantity="#{4-housBean.itemsSize}" uploadData="#{housBean.uploadItems}" listHeight="60" autoclear="true" onupload="document.getElementById('createPostingForm:submit').disabled=true; document.getElementById('createPostingForm:preview').disabled=true;" onuploadcanceled="document.getElementById('createPostingForm:submit').disabled=false; document.getElementById('createPostingForm:preview').disabled=false;" ajaxSingle="true" >
                    <f:facet name="label">
                        <h:outputText value="{_KB}KB from {KB}KB uploadedm" />
                    </f:facet>
                    <a4j:support event="onuploadcomplete" oncomplete="document.getElementById('createPostingForm:submit').disabled=false; document.getElementById('createPostingForm:preview').disabled=false;" reRender="imagesPanel" ajaxSingle="true" />
                </rich:fileUpload>
                <h:panelGrid id="imagesPanel">
                <rich:dataGrid columns="2" value="#{housBean.uploadItems}" var="item" rowKeyVar="row" >
                    <h:panelGrid>
                        <a4j:mediaOutput element="img" mimeType="image/jpg" createContent="#{housBean.paint}" value="#{row}" cacheable="false" />
                        <a4j:commandLink value="Delete" action="#{housBean.deleteItem}" reRender="uploadPanel" ajaxSingle="true">
                            <f:setPropertyActionListener target="#{housBean.row}" value="#{row}" />
                        </a4j:commandLink>
                    </h:panelGrid>
                </rich:dataGrid>
                <a4j:commandLink value="Delete All Items" action="#{housBean.deleteItems}" reRender="uploadPanel" ajaxSingle="true" rendered="#{housBean.itemsSize>1}" />
                </h:panelGrid>
                </div>
            </rich:simpleTogglePanel>
            
            <h:outputText value="Other Stuff:"/>
            <h:panelGroup>
                <h:selectBooleanCheckbox value="#{housBean.hous.cats}" /><h:outputText value="cats ok"/>
                <h:selectBooleanCheckbox value="#{housBean.hous.dogs}" /><h:outputText value="dogs ok"/>
            </h:panelGroup>
            
            <h:outputText value="Permissions:"/>
            <h:panelGrid columns="2">
                <h:selectBooleanCheckbox value="#{housBean.hous.othersContact}" /><h:outputText value="OK to contact you for other kind of services (commercial, offers, services, etc)."/>
            </h:panelGrid>
        </h:panelGrid>
        
        <h:panelGrid columns="3">
            <a4j:commandButton id="submit" type="submit" value="Create" action="#{housBean.create}" reRender="createPostingForm, backForm" rendered="#{housBean.housPrice==0}" />
            <a4j:commandButton id="submitContinue" type="submit" value="Continue" action="#{housBean.pay}" reRender="createPostingForm, backForm" rendered="#{housBean.housPrice>0}" />
            <a4j:status>
                <f:facet name="start">
                    <h:graphicImage  value="/images/ajax_process.gif"/>
                </f:facet>
            </a4j:status>
            <h:commandLink id="preview" value="Preview" action="#{housBean.previewCreate}" rendered="#{!housBean.createOk}" />
        </h:panelGrid>
    </rich:panel>
    <rich:panel rendered="#{housBean.payOk}">
        <h:messages globalOnly="true" style="color: red" styleClass="errorMessage"/>
        <h:panelGrid>
            <h:outputText value="Aqui entra el formulario de pago con Pay Pal" />
            <a4j:commandButton id="submitPay" type="submit" value="Finish" action="#{housBean.create}" reRender="createPostingForm, backForm" />
        </h:panelGrid>
    </rich:panel>
    </h:panelGrid>
    </h:form>
    </a4j:region>
    <h:form id="backForm">
        <h:panelGrid columns="2" rendered="#{housBean.createOk && !housBean.payOk}" width="35%">
            <h:commandLink value="Back to Welcome Page" action="#{housBean.backEdit}" />
            <h:commandLink value="Back to User Account Home" action="#{housBean.homeUser}" rendered="#{sessionBean.ejbSession.owner!=null}"/>
        </h:panelGrid>
        <h:commandLink value="Back" action="#{housBean.backCreate}" rendered="#{!housBean.createOk}"/>
        <a4j:commandLink value="Back" reRender="createPostingForm, backForm" rendered="#{housBean.payOk}" >
            <f:setPropertyActionListener target="#{housBean.createOk}" value="#{false}"/>
            <f:setPropertyActionListener target="#{housBean.payOk}" value="#{false}"/>
        </a4j:commandLink>
    </h:form>
    <a4j:include viewId="../login.jspx"/>
    <rich:separator height="1" />
</f:view>
<script>document.getElementById("createPostingForm:refreshLocationPanel").click();</script>